<template>
    <div class="header" id="header1">

        <el-row>
            <el-col :span="24">
                <div class="login-out" style="float:left">
                    <span>
                        <router-link to="/login">Login</router-link>
                    </span>
                    <span>Logout</span>
                </div>
                <div class="header-main" style="height:66px">
                    <ul>
                        <li class="logo">
                            <router-link to="/product-list">CampusO2O</router-link>
                        </li>

                    </ul>
                </div>

                <div class="header-about-us" style="height:66px">
                    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" background-color="rgba(255,255,255,0.95)" text-color="#333" active-text-color="#fafafa">
                        
                        <el-submenu index="6">
                            <template slot="title">个人中心</template>

                            <el-menu-item index="2-1">
                                <router-link to="/user-center">我的账号</router-link>
                            </el-menu-item>

                            <el-menu-item index="2-2">
                                <router-link to="/cart">
                                    <el-badge :value="proCountInCart" class="item">
                                        购物车
                                    </el-badge>
                                </router-link>
                            </el-menu-item>

                            <el-menu-item index="2-3">我的订单</el-menu-item>
                            <el-menu-item index="2-3">身份</el-menu-item>

                            <el-menu-item index="2-4">
                                <router-link to="/account">mama的账单</router-link>
                            </el-menu-item>
                            
                        </el-submenu>

                        <el-submenu index="7">
                            <template slot="title">About us</template>
                            <el-menu-item index="7-1">version 1</el-menu-item>
                            <el-menu-item index="7-2">选项2</el-menu-item>
                            <el-menu-item index="7-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script type="text/ecmascript-6">
import Cart from "@/service/cart-service";
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
const _cart = new Cart();
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "0",
      //当前用户的购物车商品的数量
      proCountInCart: 0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     *初始化，获取当前用户的购物车的商品数量
     */
    init() {
        const vue = this;
        _cart.getCountOfPro().then(res=>{
            vue.proCountInCart = res.data
        },err=>{
            _tips.notifyTips(vue, err.msg);
        })
    },

    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  background-color: rgba(255, 255, 255, 0.95);
  height: 60px;
  .login-out {
    float: left;
    height: 66px;
    line-height: 66px;
    padding-left: 10px;
    font-size: 15px;
  }
  .header-main {
    text-align: left;
    ul {
      li {
        display: inline-block;
        height: 66px;
        line-height: 66px;
        padding-left: 10px;
      }
      .logo {
        margin-left: 30px;
        font-size: 20px;
        color: #409eff;
        font-weight: 700;
        text-decoration: none;
      }
    }
  }
  .header-about-us {
    float: right;
    margin-top: -66px;
  }
}
</style>
